<!-- 散点图 -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .point
    background-size 100% 100%
    .main
      height 100%
      width 100%
      transition all 0.5s linear
</style>

<template lang="html">
  <div class="point">
    <div class="main"></div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'

export default {
  created () {
    console.log(this.$root.charts)
    this._getCityData()
  },
  data () {
    return {
      legendArr: [],
      color: this.$store.state.color,
      myChart: {},
      geoCoordMap: {},
      name: '散点图',
      city: [{'name': '深圳', 'value': [114.07, 22.62, 50.79956008125717]}, {'name': '上海', 'value': [121.48, 31.22, 160.79956008125717]}, {'name': '福州', 'value': [119.3, 26.08, 102.79956008125717]}],
      cityB: [{'name': '北京', 'value': [116.46, 39.92, 84.79956008125717]}, {'name': '南京', 'value': [118.78, 32.04, 140.79956008125717]}],
      cityC: [{'name': '杭州', 'value': [120.19, 30.26, 111.79956008125717]}, {'name': '昆明', 'value': [102.73, 25.04, 102.79956008125717]}, {'name': '成都', 'value': [104.06, 30.67, 80.79956008125717]}],
      cityD: [{'name': '广州', 'value': [112.23, 23.26, 111.79956008125717]}]
    }
  },
  methods: {
    _init (options) {
      console.log(555 + JSON.stringify(options))
      this.myChart = echarts.init(document.querySelector('.point .main'))
      this.myChart.setOption(options)
      this.legendArr = options.series
      this.legendArr.forEach((data) => {
        data.selected = true
      })
      this.$root.charts.push(this.myChart)
      console.log(this.$root.charts)
      window.addEventListener('resize', function () {
        this.myChart.resize()
      }.bind(this))
    },
    _getCityData () {
      axios.get('static/data/cityData.json').then((res) => {
        this.geoCoordMap = res.data
        this.$nextTick(() => {
          this._getMyChart()
        })
      })
    },
    convertData (data) {
      let res = []
      for (let i = 0; i < 4; i++) {
        let l = data.length
        let x = parseInt(Math.random() * l)
        let geoCoord = this.geoCoordMap[data[x].name]
        // let geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[x].name,
            // name: data[x].name,
            value: geoCoord.concat(Math.random() * 200)
            // value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    },
    _getMyChart () {
      axios.get('static/data/point/testData.json').then((res) => {
        let options = {
          // backgroundColor: '#404a59',
          title: {
            show: false
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + ' : ' + params.value[2]
            }
          },
          legend: {
            show: false
          },
          visualMap: {
            min: 0,
            max: 200,
            bottom: -10000,
            splitNumber: 5,
            inRange: {
              color: ['#255B78', '#2A7484', '#2F9696', '#3BBCB0', '#51D4EB']
            },
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            zoom: 1,
            top: 50,
            itemStyle: {
              normal: {
                color: '#999',
                opacity: 1,
                borderColor: 'blue'
              },
              emphasis: {
                color: '#fff'
              }
            }
          },
          series: [{
            name: '标签1',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] / 6
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: this.city
          }, {
            name: '标签2',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] / 6
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: this.cityB
          }, {
            name: '标签3',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] / 6
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: this.cityC
          }]
        }
        this._init(options)
        let seriesA = {
          name: '标签4',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: function (val) {
            return val[2] / 6
          },
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              borderColor: '#fff',
              borderWidth: 1
            }
          },
          data: this.cityD
        }
        let _this = this
        setTimeout(function () {
          options.series.push(seriesA)
          _this._init(options)
          setTimeout(function () {
            options.series = []
            console.log('666' + options.series)
            _this._init(options)
          }, 1000)
        }, 2000)
      })
    }
  },
  components: {
  }
}

</script>
